var Collapse = require('../../../src/libs/collapse').Collapse;
var Panel = require('../../../src/libs/collapse').Panel;
var Root = React.createClass({
    render:function() {
        var text = `
                  A dog is a type of domesticated animal.
                  Known for its loyalty and faithfulness,
                  it can be found as a welcome guest in many households across the world.
                `;
        var collapseSettings = {
            afterCallBack : function(){
                console.log("回调");
            }
        };
        var panelOneSettings = {
            arrow : {
                style : {
                    top: "0",
                    right: "50px"
                },
                openContent : "修改↓",
                closeContent : "修改↑"
            },
            headerCanClick: false,
            arrowCanClick: true
        };
        var panelTwoSettings = {
            arrow : {
                style : {
                    top: "0",
                    left: "16px"
                },
                openContent : "v",
                closeContent : ">"
            },
            headerCanClick: true,
            arrowCanClick: true
        };
        return (
            <div>
                <h1 style={{'text-indent':'10px','margin-top':'20px'}}>折叠面板</h1>
                <Collapse {...collapseSettings}>
                    <Panel title={<h4 style={{color: "#000"}}>This is panel header 1</h4>} key="1" {...panelOneSettings}>
                        <div>
                            姓名：<input type="text" className="name" /><br /><br />
                            电话：<input type="text" className="phone" />
                        </div>
                    </Panel>
                    <Panel title={'This is panel header 2'} key="2" {...panelOneSettings}>
                        <p>{text}</p>
                    </Panel>
                    <Panel title={'This is panel header 3'} key="3" {...panelOneSettings}>
                        <p>{text}</p>
                    </Panel>
                </Collapse>
                <h1 style={{'text-indent':'10px','margin-top':'20px'}}>手风琴</h1>
                <Collapse accordion>
                    <Panel title={'This is panel header 1'} key="1" {...panelTwoSettings}>
                        <p>{text}</p>
                    </Panel>
                    <Panel title={'This is panel header 2'} key="2" {...panelTwoSettings}>
                        <p>{text}</p>
                    </Panel>
                    <Panel title={'This is panel header 3'} key="3" {...panelTwoSettings}>
                        <p>{text}</p>
                    </Panel>
                </Collapse>
                <h1 style={{'text-indent':'10px','margin-top':'20px'}}>面板嵌套</h1>
                <Collapse>
                    <Panel title={'This is panel header 1'} key="1" {...panelTwoSettings}>
                        <Collapse defaultActiveKey="1">
                            <Panel title={'This is panel nest panel'} key="1" {...panelTwoSettings}>
                                <p>{text}</p>
                            </Panel>
                        </Collapse>
                    </Panel>
                    <Panel title={'This is panel header 2'} key="2" {...panelTwoSettings}>
                        <p>{text}</p>
                    </Panel>
                    <Panel title={'This is panel header 3'} key="3" {...panelTwoSettings}>
                        <p>{text}</p>
                    </Panel>
                </Collapse>
            </div>
        );
    }
});
ReactDOM.render(<Root/>,document.getElementById('main'));